<template>
    <div style="padding:0 15px;">
        <div style="border-radius: 10px;background: #546C7F33;height: 70px; margin-top: 10px;">
            <div style="display: flex; align-items: center;justify-content: center;">
                <div style="margin-top: 13px;">
                    <div style="font-size:14px;color:#BDBDBD;text-align: center;">Your Points</div>
                    <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px;">
                        <img style="width: 15px;height: 15px;" src="../static/img/bi.png" />
                        <div style="margin-left: 6px; font-size: 14px;color: #C1E3FF;">{{ addCommas(user.points)  }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        user: {
            type: [Object, String],
            default: () =>{}

        }
    },
    data() {
        return {

        }
    },
    methods: {
        addCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },
    }
}
</script>

<style lang="scss" scoped>

</style>